/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import { View, TextInput, Linking, Text } from 'react-native';
import { Icon,  List, Button, InputItem, Tabs, TextareaItem, Modal } from 'antd-mobile-rn';
import Picker from 'react-native-picker';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader } from '../../../library/comp';
import { Dialog, Http, PageBase } from '../../../library/func';
import Design from '../../../design';
import Config from '../../../config';
import ImagePicker from 'react-native-image-crop-picker';
// import { TextInput, ScrollView } from 'react-native-gesture-handler';

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class RepairDetail extends PageBase {
	constructor(props) {
        super(props);
 		this.state = {
            //  报修类型
            type:'公共区',
            // 详细描述
            detail:'',
            // 详细地址
            address:'',
            // 联系方式
            phone:'',
            // 联系人姓名
            name:'',
            imagePath:[
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544240678638&di=0fddd3c14852a14c7e4a68405c452ff0&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D890c50c9db00baa1ae214ff82f79d367%2Fcc11728b4710b912decd6bdbc9fdfc0392452282.jpg'
            ],

         }
    }

    /************************************************************************************ Life */
    /**
     * didMount
     */
    componentDidMount(){

        // 页面加载
        // this.pageload();

        // console.log('被执行');
        
    }

    /************************************************************************************ Event */
    // 报修
    onReport = ()=> {
        if(this.state.address == ''){
            Dialog.text('请输入详细地址')
        }else if(this.state.detail == ''){
            Dialog.text('请输入详细描述')
        }else{
            let addData = {
                set_type:this.state.type,
                set_address:this.state.address,
                set_description:this.state.detail,
            }
            // 联系人手机号
            if(this.state.phone != ''){
                addData.set_contact_mobile = this.state.phone;
            }
            // 联系人姓名
            if(this.state.name != ''){
                addData.set_contact_name = this.state.name;
            }
            // 照片
            if(this.state.imagePath.length < 1){
                addData.set_repair_images = this.state.imagePath;
            }
            Http.post({
                url: 'page/repair/logic/add.php',
                data: addData,
                success: (data)=> {
                    console.log('success',data)
                },
                pipe: Config.pipe.action.default
            })
        }
    }

    // 打电话
    call=()=>{
        return Linking.openURL('tel:10086')
    }

    // 类型
    changeType = (value) => {
        this.setState({
            type:value,
        })
        // alert(value)
    }

    // 绑定 input 值
    changeInput = (key,value) => {
        this.setState({
            [key]:value
        })
    }

    // 选择图片
    selectImage = e => {
        ImagePicker.openPicker({
            width: 60, 
            height: 60, 
            mediaType:'photo',
            // cropping: true, // 裁剪
            compressImageQuality:0.5,
            loadingLabelText:'上传图片中'
         }).then(image => { 
            let path = image.path;
            this.setState({
                imagePath:[...this.state.imagePath,path]
            })
         });
    }

    // 拍照
    takePhoto = () => {
        ImagePicker.openCamera({
            width: 60,
            height: 60,
            // cropping: true, // 裁剪
            compressImageQuality:0.5,
        }).then(image => {
            let path = image.path;
            this.setState({
                imagePath:[...this.state.imagePath,path]
            })
        });
    }

    // 删除以上传图片
    deleteImage = ( index ) => {
        let list = this.state.imagePath;
        list.splice(index,1)
        this.setState({
            imagePath:list
        })
    }

    // 上传图片方式 选择器
    selectModal = () => {
        Modal.operation([
            { text: '拍照', onPress: () => this.takePhoto()},
            { text: '从相册选择', onPress: () => this.selectImage()},
            { text: '取消', onPress: () => console.log('取消被点击了') },
        ]);
    }
    

    /************************************************************************************ Render */
	render() {
		return (
			<CPage>
				
				<CScroll mt='96' mb='100' bg='#efeff4'>
                    <CColumn bg='#fff' mt='20' mb='20' px='30' pb='30'>

                        {/* 报修类型 */}
                        <CRow h='80' y='center'>
                            <CText size='26' mr='10'>报修类型</CText>
                        </CRow>
                        <CBetween py='18' bt='1 #eee'>
                            <CHand x='left' f='1'>
                                {
                                    this.state.type == '公共区' ? <Text style={[ Design.global.selectButtonActive, {width:95} ]} onPress={e=>{this.changeType('公共区')}}>公共区</Text> :
                                    <Text style={[ Design.global.selectButtonNormal, {width:95} ]} onPress={e=>{this.changeType('公共区')}}>公共区</Text>
                                }
                            </CHand>
                            <CHand x='center' f='1'>
                                {
                                    this.state.type == '家庭' ? <Text style={[ Design.global.selectButtonActive, {width:95} ]} onPress={e=>{this.changeType('家庭')}}>家庭</Text> :
                                    <Text style={[ Design.global.selectButtonNormal, {width:95} ]} onPress={e=>{this.changeType('家庭')}}>家庭</Text>
                                }
                            </CHand>
                            <CHand x='right' f='1'>
                                {
                                    this.state.type == '其他' ? <Text style={[ Design.global.selectButtonActive, {width:95} ]} onPress={e=>{this.changeType('其他')}}>其他</Text> :
                                    <Text style={[ Design.global.selectButtonNormal, {width:95} ]} onPress={e=>{this.changeType('其他')}}>其他</Text>
                                }
                            </CHand>
                        </CBetween>

                        {/* 联系人姓名 */}
                        <CBetween y='center' py='10' bt='1 #eee'>
                            <CText size='26' mr='10' df>联系人姓名</CText>
                            <TextInput
                                value={this.state.name}
                                keyboardType='numeric'
                                onChangeText={e=>this.changeInput('name',e)}
                                underlineColorAndroid='transparent'
                                placeholder='默认为业主姓名'
                                style={{textAlign:'right',height:30,lineHeight:30,paddingTop:0,paddingBottom:0,flex:1,fontSize:14}}
                            />
                        </CBetween>

                        {/* 联系方式 */}
                        <CBetween y='center' py='10' bt='1 #eee'>
                            <CText size='26' mr='10' df>联系方式</CText>
                            <TextInput
                                value={this.state.phone}
                                keyboardType='numeric'
                                onChangeText={e=>this.changeInput('phone',e)}
                                underlineColorAndroid='transparent'
                                placeholder='默认为业主联系方式'
                                style={{textAlign:'right',height:30,lineHeight:30,paddingTop:0,paddingBottom:0,flex:1,fontSize:14}}
                            />
                        </CBetween>
                        
                        {/* 详细地址 */}
                        <CBetween y='center' py='10' bt='1 #eee'>
                            <CText size='26' mr='10' df>详细地址</CText>
                            <TextInput
                                value={this.state.address}
                                onChangeText={e=>this.changeInput('address',e)}
                                underlineColorAndroid='transparent'
                                placeholder='请输入详细地址'
                                style={{textAlign:'right',height:30,lineHeight:30,paddingTop:0,paddingBottom:0,flex:1,fontSize:14}}
                            />
                        </CBetween>

                        {/* 上传图片 */}
                        <CRow y='center' py='10' h='80' bt='1 #eee' style={{width:'100%'}}>
                            <CText size='26' onopacity='0.6'>上传图片</CText>
                        </CRow>
                        <CRow py='10' mb='15' style={{marginLeft:-10}}>

                            {/* 循环已选图片 */}
                            {   this.state.imagePath.map( ( item,index ) => {
                                    return(
                                        <CHand w='120' h='120'  ml='20' x='center' y='center' key={index}>
                                            <CHand w='120' h='120' ba='1 #eee' bg='#fff' onPress={e=>this.nav.navigate('OpenImage')}>
                                                <CImage source={{uri:item}} w='120' h='120' resizeMode={'contain'}></CImage>
                                            </CHand>
                                            <CHand abs zindex='3' style={{right:-9,top:-9}} bg='#ccce' ra='20' w='36' h='36' x='center' y='center' onPress={e=>this.deleteImage(index)}>
                                                <CIcon icon={ Design.icon["shop-delete"]} w='22' h='22' color='#fff'></CIcon>
                                            </CHand>
                                        </CHand>
                                    )
                                })
                            }

                            {/* 显示添加图片 */}
                            {   this.state.imagePath.length <= 5 && 
                                <CHand w='120' h='120' ml='20' ba='1 #eee' x='center' y='center' onPress={e=>this.selectModal(e)}>
                                    <CIcon icon={ Design.icon["server-xiu"] } w='50' h='50' color='#ccc'></CIcon>
                                </CHand>
                            }
                            
                        </CRow>
                        
                        <TextInput
                            value={this.state.detail}
                            onChangeText={e=>this.changeInput('detail',e)}
                            underlineColorAndroid='transparent'
                            multiline = {true}
                            numberOfLines = {4}
                            placeholder='请详细描述故障问题及具体位置'
                            style={{fontSize:14, lineHeight:28, borderWidth:1,borderColor:'#eee',borderRadius:3,width:'100%',height:100,textAlignVertical:'top',padding:10}} 
                        />

                    </CColumn>
                    
                    {/* 提交按钮 */}
                    <CColumn py='10' mt='10' px='30'>
                        <CButton  {...Design.global.commonButton} onPress={this.onReport}>提交</CButton>
                    </CColumn>
                    
				</CScroll>

                {/* header */}
				<PHeader nav={this.nav}>一键报修</PHeader>

                {/* 底部 */}
                <CFooter h='100' y='center' x='center'  bg='#fff55' bt='1 #efeff4'>
                    <CHand onPress={e=>{ this.call() }}>
                        <CText color='#999' size='22'>联系物业</CText>
                    </CHand>
                </CFooter>

			</CPage>
		);
	}
}
